<script src="../ExternalLibrary/js/vue.js"></script>
<!-- ----------------------- 01.v-if v-else start------------------------- -->
<fieldset>
    <legend>01.v-if</legend>
    <!-- 必须在同一个ID下,并且必须挂载到Vue实例上 -->
    <!-- 说白了就是挂载到vue实例上,vue才能管理 -->
    <div id="condition">
        <p v-if="awesome">我是v-if</p>
        <span v-else>我是v-else</span>
    </div>

    <script>
        var vm = new Vue({
            el:'#condition',
            data:{
                awesome:true
            }
        });
    </script>
</fieldset>
<!-- -----------------------01.v-if finish------------------------- -->


<!-- -----------------------02.v-if start------------------------- -->
<fieldset>
    <legend>02.template</legend>
    <div id="template">
        <template v-if="flag">
            <h1>title</h1>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
        </template>
    </div>

    <script>
        var vm2 = new Vue({
            el:"#template",
            data:{
                flag:true
            }
        })
    </script>
</fieldset>
<!-- -----------------------02.v-if end------------------------- -->


<!-- -----------------------03.v-else-if start------------------------- -->
<fieldset>
    <!-- v-else必须在v-if/v-else-if的后面 -->
    <!-- v-else-if必须在v-if/v-else-if的后面,v-else的前面 -->
    <legend>03.v-else-if</legend>
    <div id="ConditionId">
        <!-- 进入第一个，就不会进入第二个了,故而可以这么写 -->
        <div v-if="condition<0.3">
            我在[0,0.3]
        </div>
        <div v-else-if="condition<0.5">
            我在[0.3,0.5)
        </div>
        <div v-else-if="condition<0.7">
            我在[0.5,0.7)
        </div>
        <div v-else="condition<1">
            我在[0.7,1)
        </div>
    </div>

    <script>
        var vm3 = new Vue({
            el:"#ConditionId",
            data:{
                condition:Math.random()
            }
        })
    </script>
</fieldset>
<!-- -----------------------03.v-else-if end------------------------- -->


<!-- -----------------------04.v-show  start   ------------------------- -->
<fieldset>
    <legend>04.v-show原理是display的改变</legend>
    <div id="show">
        <input type="button" value="显示/隐藏" @click="showFn">
        <div class="box" v-show="showflag"></div><!-- 本质是display属性 -->
    </div>

    <style>
        .box{
            width: 300px;
            height: 150px;
            background: #cccccc;
        }
    </style>

    <script>
        var showObj = new Vue({
            el:"#show",
            data:{
                showflag:true
            },
            methods:{
                showFn:function(){
                    this.showflag = !this.showflag;
                }
            }
        })
    </script>
</fieldset>
<!-- -----------------------04.v-show  end  -------------------------- -->